require(["./config"], () => {
  require(["template", "url", "header", "footer", "fly", "zoom"], (
    template,
    url,
    header
  ) => {
    class Details {
      constructor() {
        this.close();
        this.details().then(() => {
          this.addToCart();
          this.zoom();
        });
      }
      close() {
        $("#close").click(function() {
          $("#denglu").hide();
        });
      }
      details() {
        const id = Number(window.location.search.slice(4));
        return new Promise(resolve => {
          // console.log(window.location.search.slice(4));
          //根据id请求数据
          $.get(url.baseUrl + "/details", { id }, resp => {
            // console.log(resp);
            // console.log(id);
            if (resp.code === 200) {
              // console.log(resp.details);
              const { details } = resp.body;
              // console.log(details);
              this.details = { ...details, id };
              console.log(this.details);
              const str = template("getdetailsConent", {
                ...this.details
              });

              $("#detailsContent").html(str);
              resolve();
              // console.log(this.details.imgs);
              // console.log($(".xiaotu ul"));
            }
          });
        });
      }
      addToCart() {
        $("#addCart").on("click", e => {
          // console.log(1111);
          this.fly(e);
          let cart = localStorage.getItem("cart");
          if (cart) {
            cart = JSON.parse(cart);
            const isExist = cart.some(shop => shop.id === this.details.id);
            if (isExist) {
              cart = cart.map(shop => {
                if (shop.id === this.details.id) shop.count++;
                return shop;
              });
            } else {
              cart.push({ ...this.details, count: 1, check: true });
            }
            localStorage.setItem("cart", JSON.stringify(cart));
          } else {
            localStorage.setItem(
              "cart",
              JSON.stringify([{ ...this.details, count: 1, check: true }])
            );
          }
        });
      }
      fly(e) {
        $(
          `<img src="${this.details.imgs[0]}" style="width: 20px;height: 20px;">`
        ).fly({
          start: {
            left: e.clientX, //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY //开始位置（必填）
          },
          end: {
            left: $("#cart").offset().left - $(window).scrollLeft(), //结束位置（必填）
            top: $("#cart").offset().top - $(window).scrollTop() //结束位置（必填）
          },
          speed: 0.4, //越大越快，默认1.2
          vertex_Rtop: 100, //运动轨迹最高点top值，默认20
          onEnd: function() {
            this.destroy();
            // 重新调用一次header的方法，计算购物车数量
            header.calcCartCount();
          } //结束回调
        });
      }
      zoom() {
        // 在小图的a标签上制定data-image是对应中图的src，data-zoom-image对应大图的src
        // gallery参数是小图容器的id（不加#）
        $(".zoom-image").elevateZoom({
          gallery: "gal1"
        });
      }
    }
    new Details();
  });
});
